import { reactive, watchEffect, Ref } from "vue";
import custom from "@/api/use-data";
interface Form {
    id: string;
    sjyid: string;
    ywlxid: string;
    sjdxms: string;
    sjymc: string;
    ssyh: string;
    sjdxlx: string;
    sjdxmc: string;
    ywlxmc: string;
    bz: string;
    [propName: string]: any;
}

export default function editForm(row: any, userList: Ref<unknown[] | undefined> | undefined, tableNameList: Ref<unknown[] | undefined> | undefined) {

    const form = reactive<Form>({
        id: "",
        sjyid: "",
        ywlxid: "",
        sjdxms: "",
        sjymc: "",
        ssyh: "",
        sjdxlx: "",
        sjdxmc: "",
        ywlxmc: "",
        bz: "",
    });

    const data = reactive({
        sjdxlx: custom.sjdxlx,
        user: userList,
        tableName: tableNameList,
        filterOption: (input: string, option: any) => {
            return (
                option.children[0].children
                    .toLowerCase()
                    .indexOf(input.toLowerCase()) >= 0
            );
        },
    });

    watchEffect(() => {
        Object.keys(form).forEach((key) => {
            form[key] = row.value[key];
        });
        Object.assign(form, {});
    });

    const rulesRef = reactive({
        sjdxms: [{ required: true, message: "" }],
        sjymc: [{ required: true, message: "" }],
        ssyh: [{ required: true, message: "" }],
        sjdxlx: [{ required: true, message: "" }],
        sjdxmc: [{ required: true, message: "" }],
        ywlxid: [{ required: true, message: "" }],
    });

    return {
        data,
        form,
        rulesRef
    }
}